<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css" />
		<link rel="stylesheet" type="text/css" href="../../css/lcs-font.css" />
		<link rel="stylesheet" type="text/css" href="previewImage.css"/>
		<style type="text/css">
			.main {
				width: 100%;
				background-color: white;
			}
			.mui-input-group .mui-input-row {
			     height: auto;
			}
			
			.mui-input-row label {
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    line-height: 21px;
			    float: left;
			    width: 35%;
			    padding: 11px 15px;
			}
			.mui-content-padded{
				text-align: center;
				
			}
			.helpimg{
				max-height: calc(50vh);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
			<h1 class="mui-title">小票设置</h1>
		</header>
		<div class="mui-content">
			<div class="main">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">设置收银记账</a>
						<div class="mui-collapse-content">
							<form class="mui-input-group">
								<div class="inputdiv">
									<div class="mui-input-row">
										<label>表头1</label>
										<input type="text" id="product-h1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表头2</label>
										<input type="text" id="product-h2" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾1</label>
										<input type="text" id="product-f1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾2</label>
										<input type="text" id="product-f2" class="mui-input-clear" placeholder="输入自定义">
									</div>
								</div>
									<div class="mui-button-row">
										<button id="product" class="mui-btn mui-btn-primary" type="button" onclick="return false;">保存</button>&nbsp;&nbsp;
									</div>
							</form>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">设置积分兑换</a>
						<div class="mui-collapse-content">
							<form class="mui-input-group">
								<div class="inputdiv">
									<div class="mui-input-row">
										<label>表头1</label>
										<input type="text" id="convert-h1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表头2</label>
										<input type="text" id="convert-h2" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾1</label>
										<input type="text" id="convert-f1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾2</label>
										<input type="text" id="convert-f2" class="mui-input-clear" placeholder="输入自定义">
									</div>
								</div>
									<div class="mui-button-row">
										<button id="convert" class="mui-btn mui-btn-primary" type="button" onclick="return false;">保存</button>&nbsp;&nbsp;
									</div>
							</form>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">设置次卡扣减</a>
						<div class="mui-collapse-content">
							<form class="mui-input-group">
								<div class="inputdiv">
									<div class="mui-input-row">
										<label>表头1</label>
										<input type="text" id="consume-h1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表头2</label>
										<input type="text" id="consume-h2" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾1</label>
										<input type="text" id="consume-f1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾2</label>
										<input type="text" id="consume-f2" class="mui-input-clear" placeholder="输入自定义">
									</div>
								</div>
									<div class="mui-button-row">
										<button id="consume" class="mui-btn mui-btn-primary" type="button" onclick="return false;">保存</button>&nbsp;&nbsp;
									</div>
							</form>
						</div>
					</li>
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">设置充值业务</a>
						<div class="mui-collapse-content">
							<form class="mui-input-group">
								<div class="inputdiv">
									<div class="mui-input-row">
										<label>表头1</label>
										<input type="text" id="recharge-h1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表头2</label>
										<input type="text" id="recharge-h2" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾1</label>
										<input type="text" id="recharge-f1" class="mui-input-clear" placeholder="输入自定义">
									</div>
									<div class="mui-input-row">
										<label>表尾2</label>
										<input type="text" id="recharge-f2" class="mui-input-clear" placeholder="输入自定义">
									</div>
								</div>
									<div class="mui-button-row">
										<button id="recharge" class="mui-btn mui-btn-primary" type="button" onclick="return false;">保存</button>&nbsp;&nbsp;
									</div>
							</form>
						</div>
					</li>
				</ul>
			</div>
			<div class="mui-content-padded">
				<p>
					<img class="helpimg" src="img/sprint-help.png" data-preview-src="" data-preview-group="1" />
				</p>
			</div>
			<!--<button type="button" id="subbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>-->
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.previewimage.js"></script>
		<script type="text/javascript">
			
			window.onload = function(){
				mui.init();
				mui.previewImage();
				/*g("subbut").addEventListener("tap",function(){
					set_title();
				})*/
				
				/*
				 * 监听确定
				 */
				$(".mui-btn-primary").bind("tap",function(){
					console.log(this.id);
					var bid = this.id,
						h1 = g(bid+'-h1').value,
						h2 = g(bid+'-h2').value,
						f1 = g(bid+'-f1').value,
						f2 = g(bid+'-f2').value;
					set_title({bid:bid,h1:h1,h2:h2,f1:f1,f2:f2});
				})
				get_title_list();
			}
			
			function get_title_list(){
				var data = {
					url:"/api/printer/title_list",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log(res);
					if(res.data.data.length){
						set_title_list(res.data.data)
					}
				})
			}
			
			function set_title_list(list){
				list.forEach(function(item,index){
					console.log(item.title_type)
					g(item.title_type+'-h1').value = item.header1||"";
					g(item.title_type+'-h2').value = item.header2||"";
					g(item.title_type+'-f1').value = item.footer1||"";
					g(item.title_type+'-f2').value = item.footer2||"";
				})
				
			}
			
			/*
			 * 设置
			 */
			function set_title(res){
				var data = {
					url:"/api/printer/set_title",
					data:{
						access_token:acctoken(),
						title_type:res.bid,
						header1:res.h1,
						header2:res.h2,
						footer1:res.f1,
						footer2:res.f2,
					}
				}
				ajax(data,function(res){
					console.log(res);
					mui.toast(res.msg);
				})
			}
			
			function get_title(){
				var data = {
					url:"/api/printer/get_title",
					data:{
						access_token:acctoken(),
					}
				}
				
				ajax(data,function(res){
					console.log(res);
					g("header1").value = res.data.header1;
					g("header2").value = res.data.header2;
					g("footer1").value = res.data.footer1;
					g("footer2").value = res.data.footer2;
				})
			}
			
		</script>
	</body>

</html>